import React from 'react';
import {base} from 'nc-lightapp-front';


import './index.less';

import {render, connect} from 'src/hrpub/common/frame';

import Layout from 'src/hrpub/common/components/Layout';

import BackBtn from 'src/hrpub/common/components/hr-back';

import MainAction from './actions/main';
import FormAction from '../../actions/form';
import ButtonAction from '../../actions/btn';
import RowHandleAction from '../../actions/rowHandle';
import QryEntryAction from '../../actions/qryEntry';
import PsnInfoAction from '../../actions/psninfo';
import EntryAction from '../../actions/entry';

import PageHeader from './components/Header';
import QryEntryPage from '../QryEntryPage';
import PsnInfoPage from '../PsnInfoPage';
import TableAction from '../../actions/table';

const {Header, Content} = Layout;
const {NCButton, NCIcon} = base;
const Wrapper = render({
    actions: {
        mainAct: MainAction,
        formAct: FormAction,
        btnAct: ButtonAction,
        rowAct: RowHandleAction,
        qryEntryAct: QryEntryAction,
        psnAct: PsnInfoAction,
        entryAct: EntryAction,
        tableAct: TableAction
    }
})(({props, action, state}) => {
    const {form, emp, editTable} = props;
    const {material, card, hi_psndoc_ctrt} = props.meta.getMeta()

    return (
        <Layout
            className="entryregister-add-page"
            //ref={ (ref) => (action.mainAct.addPage = ref)}
        >
            <Header
                style={{
                    display: emp.addBtnDisp
                }}
                showOrgRefer={false}
                showButtons={false}
                customButton={(() => {
                    return (
                        <PageHeader
                            style={{display: emp.addBtnDisp}}
                            button={props.button}
                            status={emp.addPageStatus}
                            onClick={action.mainAct.addHeaderClick}
                            language={emp.language}
                            workflow_state={emp.workflow_state}
                            cancelEdit={action.mainAct.cancelFormEdit}
                        />
                    );
                })()}
            >
                <BackBtn
                    onClick={action.mainAct.beSureBack}
                    style={{
                        marginTop: '8px',
                        display: emp.addBtnDisp
                    }}
                >
                </BackBtn>
            </Header>
            <Content>
                <div
                    id="addNewPage"
                    className="add-new-page"
                    style={{
                        display: emp.addPageDisp
                    }}>
                    <span className='card-title' style={{display: card.areaVisible ? 'block' : 'none'}}>
                        {
                            emp.language['gx6008-000216']//入职手续办理
                        }
                    </span>
                    <div style={{
                        display: card.areaVisible ? 'block' : 'none'
                    }}>
                        {form.createForm('card', {})}
                    </div>
                    <span className='material-title'
                          style={{display: material && material.areaVisible ? 'block' : 'none'}}>
                        {
                            emp.language['gx6008-000217']//入职材料接收情况
                        }
                    </span>
                    <div className='material-table'
                         style={{
                             display: material && material.areaVisible ? 'block' : 'none',
                             height: '300px'
                         }}>
                        {editTable.createEditTable('material', {
                            onAfterEvent: action.mainAct.tableAfterEdit,
                            height: action.mainAct.getTableHeight()
                        })}
                    </div>
                    <div style={{display: hi_psndoc_ctrt && hi_psndoc_ctrt.areaVisible ? 'block' : 'none'}}>
                        <span className='ctrt-title'>
                            {
                                emp.language['gx6008-000218']//劳动合同信息
                            }
                        </span>
                        <NCButton
                            className='button-open'
                            style={{display: emp.ctrtOpenBtnDisp}}
                            onClick={action.formAct.openForm}
                        ><NCIcon type='uf-add-c-o'/>

                        </NCButton>
                        <NCButton
                            className='button-close'
                            style={{
                                display: emp.ctrtBtnDisp,
                                float: 'right',
                                height: '20px',
                                margin: '20px 0 0 0',
                                padding: '0 20px 0 0'
                            }}
                            onClick={action.formAct.closeForm}
                        ><NCIcon type='uf-close'/>

                        </NCButton>
                        <div
                            ref={(ref) => (action.mainAct.addPage = ref)}
                            style={{
                                display: emp.ctrtDisp
                            }}>
                            {form.createForm('hi_psndoc_ctrt', {
                                onAfterEvent: action.mainAct.formAfterEdit
                            })}
                        </div>
                    </div>
                </div>
                <div style={{
                    display: emp.qryEntryDisp
                }}>
                    <QryEntryPage
                        {...props}
                    />
                </div>
                <div style={{
                    display: emp.psnInfoDisp
                }}>
                    <PsnInfoPage
                        {...props}
                    />
                </div>
            </Content>
        </Layout>
    );
});

export default connect(Wrapper);